<!DOCTYPE html>
<html>
  <head>
    <title>playback</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="node_modules/ionicons/css/ionicons.css">
    <link rel="stylesheet" type="text/css" href="node_modules/roboto-fontface/css/roboto-fontface.css" >
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <div id="splash"></div>
    <video id="player" class="hidden"></video>
    <div id="overlay">
      <div id="popup">
        <div id="playlist-popup">
          <div class="header">Play queue</div>
          <div id="playlist-entries"></div>
          <div id="playlist-add-media" class="button bottom">Add media</div>
        </div>
        <div id="chromecast-popup">
          <div class="header">Chromecasts</div>
          <div id="chromecast-entries"></div>
        </div>
      </div>
      <div id="titlebar"></div>
      <div id="idle"></div>
      <div id="controls">
        <div id="controls-timeline">
          <div id="controls-timeline-tooltip"></div>
          <div id="controls-timeline-position"></div>
        </div>
        <div id="controls-main">
          <div id="controls-play">
            <span class="js-icon mega-ion ion-play"></span>
          </div>
          <div id="controls-repeat">
            <span class="js-icon mega-ion ion-ios-infinite"></span>
          </div>
          <div id="controls-volume" class="hidden-slider">
            <span class="mega-ion ion-volume-medium"></span>
            <input type="range" id="controls-volume-slider" class="slider">
          </div>
          <div id="controls-pbrate" class="hidden-slider">
            <span class="mega-ion ion-speedometer"></span>
            <input type="range" id="controls-pbrate-slider" class="slider">
          </div>
          <div id="controls-time" class="center">
            <span id="controls-time-current">‒‒:‒‒</span>
            <span id="controls-time-separator">/</span>
            <span id="controls-time-total">‒‒:‒‒</span>
          </div>
          <div id="controls-name" class="center"></div>
        </div>
        <div class="right controls-secondary">
          <div id="player-downloadspeed"></div>
          <div id="controls-playlist">
            <span class="button"><span class="js-icon mega-ion ion-navicon"></span></span>
          </div>
          <div id="controls-chromecast">
            <span class="button"><span class="chromecast"></span></span>
          </div>
          <div id="controls-fullscreen">
            <span class="button"><span class="js-icon mega-ion ion-arrow-expand"></span></span>
          </div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
